<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-sub-content">
  <form name="$ctrl.formMsg" ng-submit="$ctrl.send()" novalidate>
    <div class="gv-forms" layout="column">
      <h1>Message</h1>

      <div class="gv-form">
        <h2></h2>
        <div class="gv-form-content" layout="column">
          <div layout="row" layout-align="space-around start">
            <div layout="column" flex="50">
              <label>Choose the channel you want to use</label>
              <md-radio-group ng-model="$ctrl.channel">
                <md-radio-button ng-repeat="chan in $ctrl.channels" value="{{chan.id}}"> {{chan.name}} </md-radio-button>
              </md-radio-group>
            </div>
            <div layout="column" flex="50" ng-if="$ctrl.channel !== 'HTTP'">
              <label>Choose the recipients</label>
              <md-select ng-model="$ctrl.recipientValues" ng-required="true" multiple>
                <md-option ng-repeat="r in $ctrl.recipients" ng-value="r.name">{{r.displayName}}</md-option>
              </md-select>
            </div>

            <div layout="column" flex="50" ng-if="$ctrl.channel === 'HTTP'">
              <datalist id="http-headers">
                <option ng-repeat="h in $ctrl.defaultHttpHeaders" value="{{h}}"></option>
              </datalist>

              <label>Add HTTP headers</label>
              <md-table-container>
                <table md-table>
                  <thead md-head>
                    <tr md-row>
                      <th md-column>Name</th>
                      <th md-column>Value</th>
                      <th></th>
                    </tr>
                  </thead>
                  <tbody md-body>
                    <tr md-row ng-repeat="header in $ctrl.httpHeaders track by $index">
                      <td md-cell><input list="http-headers" type="text" ng-model="header.key" /></td>
                      <td md-cell><input type="text" ng-model="header.value" /></td>
                      <td md-cell><ng-md-icon icon="delete" ng-click="$ctrl.deleteHttpHeader($index)"></ng-md-icon></td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <td colspan="3" md-cell ng-click="$ctrl.newHttpHeader($event)"><a>Add a new header</a></td>
                    </tr>
                  </tfoot>
                </table>
              </md-table-container>
            </div>
          </div>
          <md-input-container ng-if="$ctrl.channel !== 'HTTP'">
            <label>Title</label>
            <input ng-model="$ctrl.title" ng-required="true" />
          </md-input-container>
          <div layout="row">
            <md-input-container ng-if="$ctrl.channel === 'HTTP'" flex>
              <label>URL</label>
              <input ng-model="$ctrl.url" ng-required="true" />
            </md-input-container>
            <md-input-container ng-if="$ctrl.channel === 'HTTP'">
              <md-checkbox ng-model="$ctrl.useSystemProxy" aria-label="Use system proxy">Use system proxy</md-checkbox>
            </md-input-container>
          </div>
          <md-input-container>
            <label>Text</label>
            <textarea ng-model="$ctrl.text" ng-required="true" rows="5" tabindex="2"> </textarea>
          </md-input-container>

          <div class="md-actions" layout="row">
            <md-button
              type="submit"
              class="md-raised md-primary"
              ng-disabled="$ctrl.formMsg.$pristine || $ctrl.formMsg.$invalid"
              aria-label="send-message"
              >Send</md-button
            >
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
